<template>
  <div>
    <div class="block">
      <!-- <el-input
        v-model="ruleFrom.factory"
        placeholder="请选择工厂"
        :prefix-icon="Operation"
        clearable
      /> -->
      <el-select v-model="ruleFrom.factory" placeholder="请选择工厂">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="block">
      <el-date-picker
        v-model="ruleFrom.deliveryTime"
        type="daterange"
        range-separator="To"
        start-placeholder="客户交期起"
        end-placeholder="客户交期始"
        clearable
      />
    </div>
    <div class="block">
      <el-date-picker
        v-model="ruleFrom.dateOfApproval"
        type="daterange"
        range-separator="To"
        start-placeholder="批准日期起"
        end-placeholder="批准日期始"
        clearable
      />
    </div>

    <div class="block">
      <el-date-picker
        v-model="ruleFrom.dateOfDispatch"
        type="daterange"
        range-separator="To"
        start-placeholder="出货日期起"
        end-placeholder="出货日期始"
        clearable
      />
    </div>
    <h4 style="margin-bottom: 10px">工单状态</h4>
    <div class="flex_box">
      <div v-for="item in factoryOptions" :key="item.value">{{ item.label }}</div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { Operation } from '@element-plus/icons-vue'
const ruleFrom = reactive({
  factory: '',
  deliveryTime: '',
  dateOfApproval: '',
  dateOfDispatch: ''
})
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
const factoryOptions = ref([
  {
    value: '1',
    label: '全部'
  },
  {
    value: '2',
    label: '指定完工'
  },
  {
    value: '3',
    label: '已完工'
  },
  {
    value: '4',
    label: '已发料'
  },
  {
    value: '5',
    label: '未生产'
  },
  {
    value: '6',
    label: '生产中'
  }
])
</script>
<style lang='scss' scoped>
.block {
  margin: 10px 0;
}
.flex_box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  div {
    width: 29%;
    background: #f2f2f2;
    box-sizing: border-box;
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    &:hover,
    &.active {
      background: #91d408;
      color: #fff;
    }
  }
}
</style>